<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .container {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background: url(https://tupian.qqw21.com/article/UploadPic/2019-4/201941518273925455.jpeg) no-repeat center center #0ff;
            background: url(https://5b0988e595225.cdn.sohucs.com/images/20180412/4f89da2205ab44dba781c11e7a0860f1.gif) no-repeat center center #f0f;
            background-blend-mode: lighten;
        }

        @keyframes run {
            from {
                transform: translateX(0)
            }

            40% {
                transform: translateX(10px)
            }

            70% {
                transform: translateX(-10px)
            }

            to {
                transform: translateX(0px)
            }
        }

        .container::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background: url(https://tupian.qqw21.com/article/UploadPic/2019-4/201941518273925455.jpeg) no-repeat center center #f0f;
            background: url(https://5b0988e595225.cdn.sohucs.com/images/20180412/4f89da2205ab44dba781c11e7a0860f1.gif) no-repeat center center #f0f;
            background-blend-mode: lighten;
            mix-blend-mode: luminosity;
            animation: run 0.5s infinite linear;
        } */

        /* .container {
            width: 800px;
            height: 400px;
            margin: 10px auto;
            background: url(https://img1.baidu.com/it/u=263803391,2648064006&fm=253&fmt=auto&app=138&f=JPEG?w=849&h=500) no-repeat center center/contain;
            position: relative;
        }

        .kunkun {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url(https://5b0988e595225.cdn.sohucs.com/images/20190402/43d956c906c34b7bbdd6589b1c956c53.gif) no-repeat center center/contain;
            mix-blend-mode: multiply;
            filter: contrast(3);
        } */
        /* body {
            background-color: #000;
        }

        .container {
            width: 350px;
            height: 400px;
            margin: 10px auto;
            background: url(https://5b0988e595225.cdn.sohucs.com/images/20190402/43d956c906c34b7bbdd6589b1c956c53.gif) no-repeat center center/contain;
            overflow: hidden;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            filter: grayscale(1);
            mix-blend-mode: hard-light;
        } */
    </style>
</head>

<body>
    <!-- 故障风格 -->
    <!-- 思路：背景图和背景颜色的混合模式 -->
    <!-- 也可以文字和背景图一起使用 -->
    <!-- 实现：background-blend-mode -->

    <!-- <div class="container">
        <div class="kunkun"></div>
    </div> -->


    <!-- <div class="container">i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love kunkun i love
        kunkun i love kunkun i love kunkun i love kunkun i love kunkun </div> -->
</body>

</html>